<template>
  <div class="home">
    <p>
      {{username}}
    </p>
    <br>
    {{x}} | {{y}}
    <p>
      {{fullname}}
    </p>
    <p>
      {{total}}
    </p>
    <br>
    <button @click="changeAction(5)">修改a</button>
    <br>
    <button @click="setCount(5)">修改count1--{{count}}</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  name: 'HomeView',
  data () {
    return {
      username: 'lisa',
      firstname: '王',
      lastname: '八'
    }
  },
  // 计算属性
  computed: {
    ...mapState({ x: 'a', y: 'b' }),
    ...mapState('count1', ['count']), // count1模块中的count
    ...mapGetters(['total']),
    fullname () {
      return this.firstname + this.lastname
    }
  },
  methods: {
    ...mapMutations(['change']),
    ...mapMutations('count1', ['setCount']), // count1模块中的setCount
    ...mapActions(['changeAction']),
    updateA () {
      // this.$store.state.a = 3  // 不推荐直接改
      // this.$store.commit('change', 10)
      // this.$store.dispatch('changeAction', 5)
    }
  }
}
</script>
